<template>
	<view class="page-wrap">
		<view class="logo-wrap">
			<view>
				<image src="/static/images/publish/publish-logo.png" />
			</view>
		</view>
		<view class="page-cont padding-lr">
			<block v-for="(item,index) of list" :key="index">
				<view :class="['video-btn','margin-bottom-sm','animation',animationType[index]]" :style="{color:`${item.color}`,backgroundColor:`${item.bgColor}`}" @click="showDetail(index)">
					<view class="btn-left">
						<image :src="item.src" />
						<view class="margin-left">
							<text>
								{{item.text}}
							</text>
						</view>
					</view>
					<view class="btn-right">
						<image :src="item.arrowSrc" />
					</view>
				</view>
			</block>
			<view class="sign-cont margin-top-sm" @click.stop="handleAgree">
				<view class="sign-cont-left">
					<view :class="['agree-round',isAgree?'active':'']">
						<image src="/static/images/publish/agree.png"/>
					</view>
				</view>
				<view class="sign-cont-right margin-left">
					<text>
						发布视频、申请直播、使用本小程序，即表示同意《用户协议》及《隐私政策》
					</text>
				</view>
			</view>
		</view>
		<!-- 第一次直播验证 -->
		<auth-live ref="authLive" />
	</view>
</template>

<script>
	import AuthLive from "./components/AuthLive"
	export default {
		data() {
			return {
				list: [{
						color: "#fff",
						bgColor: "rgba(226,78,71,1)",
						src: "/static/images/publish/publish-video.png",
						arrowSrc: "/static/images/publish/right01.png",
						text: "发布视频"
					},
					{
						color: "#000",
						bgColor: "#fff",
						src: "/static/images/publish/publish-live.png",
						arrowSrc: "/static/images/publish/right02.png",
						text: "申请直播"
					}
				],
				isAgree: false,
				showPopup: false,
				showBottomPopup: false,
				animationType:['','']
			};
		},
		components: {
			AuthLive
		},
		methods: {
			handleAgree() {
				this.isAgree = !this.isAgree
			},
			async showDetail(index) {
				if(!this.isAgree){
					this.$set(this.animationType,index,'animation-shake')
					setTimeout(()=> {
						this.$set(this.animationType,index,'')
					}, 100);
					this.$h.toast('请先同意下方协议')
					return 
				}
				//检测是否授权
				if(this.checkUserInfo()){
					if (index === 0) {
						this.$h.router.push({
							path:"/pages/publish/videoInfo/videoInfo"
						})
					} else {
						let {data}=await this.$h.api.liveModel.getIdentity()
						if(data.identity_status===0||data.identity_status===3){
							this.$refs.authLive.toggle()
						}else if(data.identity_status===1){
							this.$h.toast('身份信息审核中')
						}else{
							let {code,msg,data} = await this.$h.api.liveModel.getLive()
							if(data.status===1){
								this.$h.router.push({
									path:"/pages/publish/liveInfo/liveInfo",
									params:{
										state:1
									}
								})
							}else if(data.status===2){
								this.$h.router.push({
									path:"/pages/publish/liveInfo/liveInfo",
									params:{
										state:2
									}
								})
							}else if(data.status===3){
								this.$h.router.push({
									path:"/pages/publish/liveInfo/liveInfo"
								})
							}else if(data.status===5){
								this.$h.toast('直播违规被停止')
							}
						}
					}
				}
			}
		}
	}
</script>
<style>
	page {
		background: url("https://hansu-1253325863.cos.ap-shanghai.myqcloud.com/weixinVideo/publish_bg.png") no-repeat;
		background-size: cover;
		background-origin: content-box;
	}
</style>
<style lang="scss" scoped>
	.page-wrap {
		height: 100vh;
		display: flex;
		flex-direction: column;
		@include df-col();

		.logo-wrap {
			height: 50vh;
			@include df-row($jc: center, $ai:center);

			image {
				width: 172rpx;
				height: 178rpx;
			}
		}

		.page-cont {
			@include df-col($flex: 1);

			%btn {
				width: 100%;
				height: 160rpx;
				padding: 20rpx;
				@include df-row($jc: space-between, $ai:center);
				border: 2rpx solid rgba(255, 255, 255, 1);
				border-radius: 10rpx;

				image {
					@include build-square(60rpx)
				}

				font-size: 36rpx;
				font-weight: bold;
			}

			.video-btn {
				@extend %btn;

				.btn-left {
					@include df-row($ai: center, $flex:1);
				}

				.btn-right {
					width: 60rpx;

					image {
						@include build-square(32rpx)
					}
				}
			}

			.sign-cont {
				display: flex;

				&-left {
					.agree-round {
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						@include df-row($jc: center, $ai:center);
						background-color: #B5B5B5;

						image {
							@include build-square(20rpx)
						}
					}

					.active {
						background-color: rgba(226, 78, 71, 1);
					}
				}
			}

		}
	}
</style>
